<template>
  <div>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane :key="item.id" v-for="item in activeLiss">
        <template #tab>
          <span @click="activeClick(item)">
            {{ item.name }}
            <span v-if="item.name == '品牌'" class="Beta">Beta</span>
          </span>
        </template>
      </a-tab-pane>
    </a-tabs>

    <!-- <Signals ref="childeRef1" /> -->
    
    <div class="demon items-center" v-if="storeCount.length > 0">
      <div>已选条件:</div>
      <div class="demon_two">
        <div class="demon_cox" v-for="item in storeCount" :key="item">
          {{ item.name }}
          <span style="margin-right: 15px" v-for="ele in item.value" :key="ele">
            <template v-if="item.name == '地区：'">
              <span
                v-for="lll in ele.name"
                :key="lll"
                style="margin-right: 3px"
              >
                <span v-for="aa in lll" :key="aa">{{ aa }}</span></span
              >
            </template>
            <span
              v-else-if="item.name == '公告类型：'"
              v-for="ll in ele.name"
              :key="ll"
              style="margin-right: 3px"
              >{{ ll }}</span
            >
            <span v-else>{{ ele.name }}</span>
          </span>
          <div class="demon_icp" @click="demiconClick(item)">
            <el-icon>
              <Close />
            </el-icon>
          </div>
        </div>
      </div>
      <div class="flex gap-[12px]">
        <div
          class="demon_three"
          style="background-color: #fde8bf"
          @click="save"
        >
          <span class="demon_three-span">保存</span>
        </div>
        <div class="demon_three" @click="removals">
          <span class="demon_three-span">清空</span>
          <el-icon :size="14">
            <Delete />
          </el-icon>
        </div>
      </div>
    </div>

    <div class="flex my-[20px] gap-[20px]" v-if="dynamicTags.length !==0 ">
      <div @click="selectAll()" :class="isAll ? 'keyworded' : 'keyword'">
        全部
      </div>
      <div
        @click="select(item.kewords)"
        v-for="item in dynamicTags"
        :key="item.kewords"
        :class="titles.includes(item.kewords) ? 'keyworded' : 'keyword'"
      >
        {{ item.kewords }}
      </div>
    </div>
<div class="btn-bor" v-if="dynamicTags.length !==0 "></div>
    <!-- 全部标讯 -->
    <TenderContent />
  </div>
</template>

<script setup>
import Signals from "./signals/index.vue";
import { Delete, Close } from "@element-plus/icons-vue";
import { useWorkSearchStore } from "@/stores/menuStore.ts";
import { computed } from "vue";
import { useRadio1Store } from "@/pain/search/search";
import TenderContent from "./tenderContent/index.vue";
import {
  bxsubscriptionsubscription_search,
  bxsubscriptionsubscription_search_list,
  bxsubscriptionlist,
} from "../../../../Api/work";
import { message } from "ant-design-vue";
const signalsRadio1 = useRadio1Store();
const activeKey = ref("1");
const store = useWorkSearchStore();
const childeRef1 = ref();
const storeCount = computed(() => {
  return store.count;
});

const removals = () => {
  store.count = [];
  childeRef1.value.biaoxun();
  signalsRadio1.getsearchs();
};

const titles = ref([]);

const select = (title) => {
  if (titles.value.includes(title)) {
    titles.value = titles.value?.filter((p) => p != title);
  } else {
    titles.value.push(title);
  }
  signalsRadio1.title = {
    ...signalsRadio1.title,
    [activeKey.value == 1 ? "title_new" : "company_new"]: titles.value,
    [activeKey.value == 1 ? "company_new" : "title_new"]: undefined,
  };
  signalsRadio1.getsearchs();
};

const selectAll = () => {
  if (isAll.value) {
    titles.value = [];
  } else {
    titles.value = dynamicTags.value.map((p) => {
      return p.kewords;
    });
  }
  signalsRadio1.title = {
    ...signalsRadio1.title,
    title_new: titles.value,
  };
  signalsRadio1.getsearchs();
};

const isAll = computed(() => {
  let flag = true;
  dynamicTags.value.map((p) => {
    if (!titles.value.includes(p.kewords)) {
      flag = false;
    }
  });
  console.log("computed");
  return flag;
});

// 单个清空
const demiconClick = (data) => {
  store.count = store.count.filter((word) => word.name != data.name);
  // if (activeKey.value == "1") {
  console.log(signalsRadio1.count);
  if (data.name == "公告类型：") {
    signalsRadio1.count.bulletin = [];
    childeRef1.value.reClick1();
  } else if (data.name == "招标公司类型：") {
    signalsRadio1.count.Boos = [];
    childeRef1.value.reClick3();
  } else if (data.name == "招标状态") {
    signalsRadio1.count.affairs = "";
    childeRef1.value.radio1.affairs = "";
    childeRef1.value.drop4 = [];
  } else if (data.name == "投标资质过滤：") {
    signalsRadio1.count.checkedCities = [];
    childeRef1.value.checkClock();
  } else if (data.name == "地区：") {
    signalsRadio1.count.leave = [];
    signalsRadio1.count.market = [];
    signalsRadio1.count.quarter = [];
    childeRef1.value.checkClock6();
  } else if (data.name == "时间：") {
    childeRef1.value.reClick7();
    childeRef1.value.drop8 = [];
    signalsRadio1.count.times = [
      {
        oneTime: "",
        twoTime: "",
      },
    ];
  } else if (data.name == "联系方式") {
    childeRef1.value.radio1.contact = "";
    signalsRadio1.count.contact = "";
    childeRef1.value.drop8 = [];
  } else if (data.name == "金额：") {
    childeRef1.value.moneyClick();
    childeRef1.value.radio1.money = "";
    signalsRadio1.count.money = "";
    signalsRadio1.count.max = "";
    signalsRadio1.count.min = "";
  } else if (data.name == "采购类别：") {
    childeRef1.value.reClick10();
    signalsRadio1.count.projects = [];
  } else if (data.name == "附件：") {
    childeRef1.value.radio1.annexes = "";
    signalsRadio1.count.annexes = "";
    childeRef1.value.drop16 = [];
  } else if (data.name == "搜索范围：") {
    signalsRadio1.count.checkList = [];
    childeRef1.value.reClick12();
  } else if (data.name == "匹配模式：") {
    childeRef1.value.drop13 = [];
    childeRef1.value.radio1.matching = "";
    signalsRadio1.count.matching = "";
  } else if (data.name == "同时包含关键词：") {
    signalsRadio1.count.keywords = "";
    childeRef1.value.embodyClick();
  } else if (data.name == "同时包含关键词范围：") {
    signalsRadio1.count.keyList = [];
    childeRef1.value.embodyClick();
  } else if (data.name == "同时包含排除词:") {
    signalsRadio1.count.excluded = "";
    childeRef1.value.removeClick();
  } else if (data.name == "同时包含排除词范围:") {
    signalsRadio1.count.excludedList = [];
    childeRef1.value.embodyClick();
  }
  signalsRadio1.getsearchs();
  // }
};

const save = async () => {
  await bxsubscriptionsubscription_search({
    subscription_search: encodeURIComponent(
      JSON.stringify({ name: store.count, value: signalsRadio1.count })
    ),
    subscription_search_info: JSON.stringify({
      name: store.count,
      value: signalsRadio1.count,
    }),
  });
  message.success("保存成功");
  console.log("store", store);
};

let activeLiss = [
  {
    id: "1",
    name: "公告标讯",
  },
  {
    id: "2",
    name: "企业公司",
  },
];

const dynamicTags = ref([]);
const activeClick = (id) => {
  activeKey.value = id.id;
  titles.value = [];

  getKeyWord();
  console.log(activeKey.value);
};
const getKeyWord = async () => {
  const res = await bxsubscriptionlist({ type_id: activeKey.value });
  dynamicTags.value = res.data.data;
  titles.value = dynamicTags.value.map((p) => {
    return p.kewords;
  });

  signalsRadio1.title = {
    ...signalsRadio1.title,
    [activeKey.value == 1 ? "title_new" : "company_new"]: titles.value,
    [activeKey.value == 1 ? "company_new" : "title_new"]: undefined,
  };
  signalsRadio1.getsearchs();
};

const before = async () => {
  const res = await bxsubscriptionsubscription_search_list();

  const p = decodeURIComponent(res.data.data);
  const data = JSON.parse(p);

  if (data) {
    store.count = data.name;
    signalsRadio1.count = data.value;
  }

  getKeyWord();


  // childeRef1.value.setValue(data.value);

  // signalsRadio1.getsearchs();
};

before();
</script>

<style lang="scss" scoped>
.demon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px 15px 20px;

  .demon_two {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .demon_cox {
      position: relative;
      margin: 3px 0 0 15px;
      padding: 5px 10px;
      // background-color: #e6e9ff;
      background: #fde8bf;
      border-radius: 50px;
      font-size: 14px;
      color: #f78c16;

      .demon_icp {
        position: absolute;
        top: 6.5px;
        right: 6.5px;
      }
    }
  }

  .demon_three {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 86px;
    height: 34px;
    background-color: #ffe2e2;
    color: #ff4848;
    border-radius: 50px;
    cursor: pointer;

    .demon_three-span {
      margin-right: 5px;
    }
  }
}
.keyword {
  height: 28px;
  text-align: center;
  line-height: 28px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #f43107;
  padding-inline: 16px;
}
.keyworded {
  height: 28px;
  text-align: center;
  line-height: 28px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #f43107;
  padding-inline: 16px;
  background: #f43107;
  color: #fff;
}
.btn-bor{
  border-bottom: 1px solid #eeeeee;
}
</style>
